{% block sw_notification_center %}
<sw-context-button
    ref="notificationCenterContextButton"
    aria-label="global.notification-center.title"
    class="sw-notification-center__context-button"
    :class="additionalContextButtonClass"
    :auto-close="false"
    :menu-width="360"
    :menu-offset-top="10"
    :menu-offset-left="24"
    :additional-context-menu-classes="additionalContextMenuClasses"
    @context-menu-after-open="onContextMenuOpen"
    @context-menu-after-close="onContextMenuClose"
>
    <template #button>
        {% block sw_notification_center_context_button_button_slot %}
        <mt-icon
            name="regular-bell"
            size="20px"
        />
        {% endblock %}
    </template>

    {% block sw_notification_center_content %}
    <div class="sw-notification-center__content">
        {% block sw_notification_center_content_header %}
        <div class="sw-notification-center__header">
            <h3 class="sw-notification-center__title">
                {{ $tc('global.notification-center.title') }}
            </h3>

            {% block sw_notification_center_content_context_menu %}
            <sw-context-button>
                <sw-context-menu-item
                    variant="danger"
                    @click="openDeleteModal"
                >
                    {{ $tc('global.notification-center.deleteModal.title') }}
                </sw-context-menu-item>
            </sw-context-button>
            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_notification_center_content_notification_container %}
        <div class="sw-notification-center__notification-container">
            <div v-show="notifications.length > 0">
                <sw-notification-center-item
                    v-for="notification in notifications"
                    :key="notification.uuid"
                    :notification="notification"
                    @center-close="changeVisibility(false)"
                />
            </div>

            <div
                v-show="notifications.length === 0"
                class="sw-notification-center__empty-text"
            >
                {{ $tc('global.notification-center.emptyText') }}
            </div>
        </div>
        {% endblock %}
    </div>
    {% endblock %}
    {% block sw_notification_center_delete_modal %}
    <sw-modal
        v-if="showDeleteModal"
        :title="$tc('global.notification-center.deleteModal.title')"
        variant="small"
        @modal-close="onCloseDeleteModal"
    >
        {% block sw_notification_center_delete_modal_confirm_delete_text %}
        <p class="sw_notification_center__confirm-delete-text">
            {{ $tc('global.notification-center.deleteModal.textConfirm') }}
        </p>
        {% endblock %}

        {% block sw_notification_center_delete_modal_footer %}
        <template #modal-footer>
            {% block sw_notification_center_delete_modal_cancel %}
            <mt-button
                size="small"
                variant="secondary"
                @click="onCloseDeleteModal"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_notification_center_delete_modal_confirm %}
            <mt-button
                variant="critical"
                size="small"
                @click="onConfirmDelete"
            >
                {{ $tc('global.default.delete') }}
            </mt-button>
            {% endblock %}
        </template>
        {% endblock %}
    </sw-modal>
    {% endblock %}
</sw-context-button>
{% endblock %}
